<template>
  <div class="activity-laborday">
    <div class="activity-laborday-bg">
      <img :src="bg" alt="春季活动">
    </div>
    <div class="activity-laborday-navs" :style="{top: navsHeight + 'px'}">
      <img :src="require('./navtitle.png')" alt="">
      <img :src="require('./nav1.png')" alt="" @click="scrollPositionY(bt1scrollto, 10)">
      <img :src="require('./nav2.png')" alt="" @click="scrollPositionY(bt2scrollto, 20)">
      <img :src="require('./nav3.png')" alt="" @click="scrollPositionY(bt3scrollto, 30)">
    </div>
    <div class="activity-laborday-info" :style="{bottom: infoHeight + 'px'}">
      <h2>活动规则</h2>
      <div></div>
      <p>1.活动时间：2017年4月29日-2017年5月12日。</p>
      <p>2.本次活动分秒金融平台用户均可获得3张加息券，加息券自动发放到用户账户内，在个人中心。</p>
      <p>3. “投资卫星项目,享最高1.5%返现”活动奖励于活动结束后3个工作日内以现金奖励形式发放到。</p>
      <p>4. 本次活动除新手标外均可参与，请用户自行选择最佳投资方案。</p>
      <p>5. 本次活动最终解释权归分秒金融所有，如有疑问请拨打客服电话400-608-2001进行咨询。</p>
    </div>
    <div class="activity-laborday-btn" :style="{bottom: btnHeight + 'px'}">
      <div class="btn">
        <span @click="invest()">立即出借</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        bg: require('./laborday_bg.jpg'),
        w: 0,
        h: 0
      }
    },
    computed: {
      btnHeight () {
        return (100 / 3966) * this.h
      },
      navsHeight () {
        return (460 / 3966) * this.h
      },
      infoHeight () {
        return (385 / 3966) * this.h
      },
      bt1scrollto () {
        return (810 / 3966) * this.h
      },
      bt2scrollto () {
        return (1830 / 3966) * this.h
      },
      bt3scrollto () {
        return (3000 / 3966) * this.h
      }
    },
    created () {
      this.w = document.documentElement.clientWidth
      this.h = this.w * (3966 / 750)
    },
    methods: {
      invest () {
        this.$router.push('/invest')
      },
      scrollPositionY (y, rate) {
        var posY = parseInt(window.scrollY)
        var timer = setInterval(() => {
          window.scrollTo(0, posY += rate)
          if (posY > y) {
            clearInterval(timer)
          }
        }, 1)
      }
    }
  }
</script>

<style lang='scss' scoped>
  .activity-laborday {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 0;
    max-width: 100%;
    overflow: hidden;
    &-bg {
      width: 100%;
      img {
        width: 100%;
      }
    }
    &-navs {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-around;
      position: absolute;
      width: 100%;
      text-align: center;
      z-index: 200;

      img {
        animation: pulse 2s infinite;
        &:nth-child(1) {
          width: (188vw/7.5);
          height: (248vw/7.5);
        }
        &:nth-child(2),
        &:nth-child(3),
        &:nth-child(4) {
          width: (190vw/7.5);
          height: (186vw/7.5);
        }
       
      }
    }
    &-info {
      position: absolute;
      z-index: 100;
      width: 100%;
      color: #f1603f;
      h2 {
        text-align: center;
        font-size: (36vw/7.5);
      }
      div {
        width: (70vw/7.5);
        height: (4vw/7.5);
        background: #f1603f;
        margin: 0 auto;
        margin-top: (12vw/7.5);
        margin-bottom: (24vw/7.5);
      }
      p {
        width: 90%;
        font-size: (25vw/7.5);
        line-height: (46vw/7.5);
        margin: 0 auto;
        font-weight: 700;
      }
    }
    &-btn {
      position: absolute;
      width: 100%;
      text-align: center;
      z-index: 100;
      .btn {
        width: 70%;
        margin: 0 auto;
        height: 10vw;
        span {
          display: block;
          width: 100%;
          height: 13.66666vw;
          line-height: 13.3333333vw;
          color: #fff;
          font-size: (40vw/750);
          text-decoration: none;
          background: url('./btn.png') 0 0 no-repeat;
          background-size: cover;
          font-size: 4vw;
        }
      }
    }
    @keyframes pulse{

        from {
          -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
        }
        50% {
          -webkit-transform: scale3d(1.05, 1.05, 1.05);
          transform: scale3d(1.05, 1.05, 1.05);
        }
        to {
          -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
        }
    }
  }
</style>
